<!-- 退货单详情 refundDetail -->
<template>
  <div class="content">
    <div class="refund-detail">
      <el-steps :active="step" align-center finish-status='success' process-status="finish">
        <el-step v-for="item in steps" :key="item.value" :title="item.label" :description="item.time | glbTimeFormat"></el-step>
      </el-steps>

      <div class="refund-content">
        <div class="content-list">
          <h3>退款订单</h3>
          <!-- 商品  -->
          <div class="i-list">
            <div class="product-list" v-for="item in tableList" :key="item.id">
              <div class="product-img">
                <img :src="item.productPic" alt="">
                <span>
                  <span>{{item.productName}}</span>
                  <span style="font-size: 12px;">规格：{{item.sp1 ? item.sp1:''}}{{item.sp2 ? ','+item.sp2:''}}{{item.sp3
                    ? ',' + item.sp3: ''}}</span>
                </span>
              </div>
              <div class="product-info">
                <p>
                  <span>单价</span>
                  <span>实价</span>
                  <span>积分单价</span>
                  <span>购买数量</span>
                </p>
                <p>
                  <span>￥{{item.productPrice || 0}}</span>
                  <span>￥{{item.productRealPrice || 0}}</span>
                  <span>{{item.returnIntegration || 0}}</span>
                  <span>{{item.productCount || 0}}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 退款信息  -->
          <div class="i-list">
            <p>退款编号： {{ refundDetail.returnSn }}</p>
            <p>退款类型： {{ returnType }}</p>
            <p>退款金额： {{ refundDetail.returnAmount }}</p>
            <p>退款积分： {{ refundDetail.returnIntegration }}</p>
            <p>退款原因： {{ refundDetail.reason }}</p>
          </div>
          <!-- 订单信息  -->
          <div class="i-list">
            <p>订单编号： {{ orderInfo.orderSn || '' }}</p>
            <p>付款时间： {{ orderInfo.paymentTime | glbTimeFormat}}</p>
            <p>买家： {{ orderInfo.memberUsername }}</p>
            <p v-if="orderInfo.deliveryCompany">物流信息： {{ '物流公司：' + orderInfo.deliveryCompany + `,
              物流单号：`+orderInfo.deliverySn }}</p>
            <p>运费： {{ orderInfo.freightAmount }}</p>
            <p>优惠： {{ orderInfo.discountAmount }}</p>
            <p>实付金额： {{ orderInfo.payAmount }}</p>
            <p>实付积分： {{ orderInfo.payIntegration }}</p>
          </div>
        </div>

        <div class="content-list">
          <h3>退款处理</h3>
          <!-- 0->待处理；1->退货中；2->已完成；3->已拒绝 , 4-> 已关闭-->
          <div class="i-list" v-if="refundDetail.status === 0">
            <div>退款凭证：</div>
            <el-image style="width: 100px; height: 100px;margin: 5px;" v-for="(item, index) in proofPics" :key="index"
                      :src="item" :preview-src-list="proofPics">
            </el-image>
            <div>退款说明：{{refundDetail.description}}</div>
            <div>收到买家 <span style="color: red">{{returnType}}</span> 申请，请尽快处理</div>
            <div>
              <el-button type="primary" :loading="btnLoading" @click="handlePass">同意申请</el-button>
              <el-button :loading="btnLoading" @click="handleRefuse">拒绝申请</el-button>
            </div>
          </div>
          <!-- 2->已完成 -->
          <div class="i-list" v-if="refundDetail.status === 2">
            <div>退款凭证：</div>
            <el-image style="width: 100px; height: 100px;margin: 5px;" v-for="(item, index) in proofPics" :key="index"
                      :src="item" :preview-src-list="proofPics">
            </el-image>
            <div>{{'退款金额：' + refundDetail.returnAmount + ', 退还积分：' + refundDetail.returnIntegration}}</div>
            <div>退款状态：已完成</div>
          </div>
          <!-- 3->已拒绝  -->
          <div class="i-list" v-if="refundDetail.status === 3">
            <div>退款凭证：</div>
            <el-image style="width: 100px; height: 100px;margin: 5px;" v-for="(item, index) in proofPics" :key="index"
                      :src="item" :preview-src-list="proofPics">
            </el-image>
            <div>{{'退款金额：' + refundDetail.returnAmount + ', 退还积分：' + refundDetail.returnIntegration}}</div>
            <div>拒绝原因：<span>{{refundDetail.handleNote}}</span></div>
            <div>退款状态：<span style="color: red">已拒绝</span></div>
          </div>
          <!-- 4-> 已关闭  -->
          <div class="i-list" v-if="refundDetail.status === 4">
            <div>退款凭证：</div>
            <el-image style="width: 100px; height: 100px;margin: 5px;" v-for="(item, index) in proofPics" :key="index"
                      :src="item" :preview-src-list="proofPics">
            </el-image>
            <!-- <div>{{'退款金额：' + refundDetail.returnAmount + ', 退还积分：' + refundDetail.returnIntegration}}</div> -->
            <div>退款状态：已关闭</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetReturnApplyDetail, ReturnApplyUpdate } from '@/api/order'
export default {
  name: 'refundDetail',
  components: {},
  data () {
    return {
      step: 1,
      steps: [],
      refundDetail: {},
      orderInfo: {},
      tableList: [], // 商品
      proofPics: [], // 退款凭证图片
      btnLoading: false,
      returnType: ''
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.orderId = this.$route.query.id
    this.getList()
  },
  methods: {
    getList () {
      GetReturnApplyDetail(this.orderId).then(res => {
        const data = res.data
        this.refundDetail = data
        this.returnType = this.refundDetail.type === 0 ? '仅退款' : '退货退款'
        this.orderInfo = data.order
        if (this.refundDetail.proofPics) {
          this.proofPics = this.refundDetail.proofPics.split(',')
        } else {
          this.proofPics = []
        }
        // 订单商品
        this.tableList = data.items
        this.dealStep(data)
      }).catch(e => { })
    },
    // 步骤条
    dealStep (data) {
      // 0：仅退款 1：退货退款
      this.step = data.status + 1
      if (data.type === 1) {
        this.steps = [
          { value: '0', label: '买家申请退款', time: data.createTime },
          { value: '1', label: '商家处理申请', time: data.handleTime },
          { value: '2', label: '买家退货', time: data.buyerHandlerTime },
          { value: '3', label: '完成', time: data.finishTime }
        ]
      } else {
        this.steps = [
          { value: '0', label: '买家申请退款', time: data.createTime },
          { value: '1', label: '商家处理退款', time: data.handleTime },
          { value: '2', label: '完成', time: data.finishTime }
        ]
      }
    },

    handlePass () {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', null, [
          h('p', null, '同意后，退款将原路返回至买家账户'),
          h('p', { style: 'color: grey' }, `退款方式: ${this.returnType} `),
          h('p', { style: 'color: red' }, `退款金额: ￥${this.refundDetail.returnAmount}, 退还积分: ${this.refundDetail.returnIntegration}`)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            const params = {
              id: this.refundDetail.id,
              status: 2
            }
            this.returnReq(params)
            done()
          } else {
            done()
          }
        }
      }).then(() => { }).catch(() => { })
    },

    handleRefuse () {
      this.$prompt('请输入拒绝理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const params = {
          id: this.refundDetail.id,
          status: 3,
          handleNote: value
        }
        this.returnReq(params)
      }).catch(() => {
      })
    },

    returnReq (val) {
      this.btnLoading = true
      ReturnApplyUpdate(val).then(res => {
        this.btnLoading = false
        this.$message.success(res.message || '操作成功')
        // if (data.code === 200) {
        //   this.$message.success(data.message || '退款成功')
        // } else {
        //   this.$message.error(data.message || '退款失败')
        // }
        this.getList()
      }).catch(e => {
        this.btnLoading = false
      })
    }

  }
}

</script>
<style lang='scss' scoped>
$Border: 1px solid rgb(232, 232, 232);
.refund-detail {
  width: 100%;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
  .refund-content {
    border-radius: 3px;
    box-sizing: border-box;
    margin: 20px 40px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    .content-list {
      border: $Border;
      box-sizing: border-box;
      width: 48%;
      h3 {
        font-size: 18px;
        font-weight: 500;
        padding: 10px;
        border-bottom: $Border;
      }
      .i-list {
        padding: 10px;
        border-bottom: 1px dashed rgb(232, 232, 232);
        color: rgb(96, 98, 102);
        line-height: 30px;
        &:nth-last-child(1) {
          border-bottom: none;
        }
      }
      .product-list {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        &:last-child(1) {
          margin-bottom: 0px;
        }
        .product-img {
          width: 40%;
          display: flex;
          justify-content: flex-start;
          overflow: hidden;
          img {
            width: 70px;
            height: 70px;
            vertical-align: middle;
          }
          span {
            display: block;
            line-height: 24px;
            font-size: 14px;
            padding: 0 0 0 5px;
            max-height: 70px;
          }
        }
        .product-info {
          width: 58%;
          text-align: center;
          p {
            width: 100%;
          }
          span {
            display: inline-block;
            width: 25%;
          }
        }
      }
    }
  }
}
</style>
